<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>木毛旅行社 - 登录</title>
	<style>
		:root {
			--primary-color: #3498db;
			--secondary-color: #2980b9;
			--accent-color: #e74c3c;
			--light-bg: #f8f9fa;
			--dark-bg: #2c3e50;
			--text-color: #333;
			--light-text: #fff;
			--border-radius: 8px;
			--box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			--transition: all 0.3s ease;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Helvetica Neue', Arial, sans-serif;
			color: var(--text-color);
			line-height: 1.6;
			background-color: var(--light-bg);
			display: grid;
			grid-template-rows: auto 1fr;
			min-height: 100vh;
		}

		header {
			background-color: var(--light-text);
			box-shadow: var(--box-shadow);
			position: sticky;
			top: 0;
			z-index: 100;
		}

		.center {
			width: 90%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 15px;
		}

		.logo {
			color: var(--dark-bg);
			font-size: 2rem;
			margin: 0.5em 0;
			text-align: center;
		}

		nav ul.link {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 1.5em;
			list-style: none;
			padding: 1em 0;
		}

		nav ul.link li a {
			color: var(--text-color);
			text-decoration: none;
			font-weight: 500;
			padding: 0.5em 1em;
			border-radius: var(--border-radius);
			transition: var(--transition);
		}

		nav ul.link li a:hover,
		nav ul.link li.active a {
			color: var(--light-text);
			background-color: var(--primary-color);
		}

		#search {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2em 0;
		}

		#login {
			background: white;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			padding: 2.5em;
			width: 100%;
			max-width: 400px;
			transition: var(--transition);
		}

		#login:hover {
			box-shadow: 0 8px 24px rgba(0,0,0,0.15);
		}

		.login-header {
			display: flex;
			justify-content: center;
			margin-bottom: 2em;
			font-size: 1.2rem;
		}

		.login-header span {
			padding: 0 15px;
			cursor: pointer;
			position: relative;
			transition: var(--transition);
		}

		.login-header span.active {
			color: var(--primary-color);
			font-weight: 600;
		}

		.login-header span.active::after {
			content: '';
			position: absolute;
			bottom: -8px;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: var(--primary-color);
		}

		.login-header b {
			color: #ccc;
		}

		.input-group {
			margin-bottom: 1.5em;
		}

		.input-group input {
			width: 100%;
			padding: 12px 15px;
			border: 1px solid #ddd;
			border-radius: var(--border-radius);
			font-size: 1rem;
			transition: var(--transition);
		}

		.input-group input:focus {
			border-color: var(--primary-color);
			outline: none;
			box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
		}

		.button {
			width: 100%;
			padding: 12px;
			background-color: var(--primary-color);
			color: white;
			border: none;
			border-radius: var(--border-radius);
			font-size: 1.1rem;
			font-weight: 500;
			cursor: pointer;
			transition: var(--transition);
		}

		.button:hover {
			background-color: var(--secondary-color);
		}

		.error-message {
			color: var(--accent-color);
			text-align: center;
			margin-top: 1em;
			font-size: 0.9rem;
		}

		.footer-links {
			text-align: center;
			margin-top: 1.5em;
			font-size: 0.9rem;
		}

		.footer-links a {
			color: var(--primary-color);
			text-decoration: none;
			margin: 0 10px;
		}

		.footer-links a:hover {
			text-decoration: underline;
		}

		@media (max-width: 768px) {
			nav ul.link {
				gap: 0.5em;
			}

			nav ul.link li a {
				padding: 0.5em;
				font-size: 0.9rem;
			}

			#login {
				padding: 1.5em;
			}
		}
	</style>
</head>
<body>
<header id="header">
	<div class="center">
		<h1 class="logo">木毛旅行社</h1>
		<nav>
			<ul class="link">
				<li><a href="/index">首页</a></li>
				<li><a href="/information">旅游咨询</a></li>
				<li><a href="/buy">机票订购</a></li>
				<li><a href="/scenery">风景欣赏</a></li>
				<li class="active"><a href="/login">登录</a></li>
			</ul>
		</nav>
	</div>
</header>

<div id="search">
	<div id="login">
		<form action="/login" method="POST">
			<div class="login-header">
				<span class="active">登录</span>
				<b>·</b>
				<span onclick="window.location='/register'">注册</span>
			</div>

			<div class="input-group">
				<input class="input" name="username" placeholder="用户名" type="text" required>
			</div>

			<div class="input-group">
				<input class="input" name="password" placeholder="密码" type="password" required>
			</div>

			<button type="submit" class="button">登 录</button>

			<!-- 错误提示 -->
			{{ if .msg }}
			<p class="error-message">{{ .msg }}</p>
			{{ end }}

			<div class="footer-links">
				<a href="/forgot-password">忘记密码?</a>
				<a href="/register">立即注册</a>
			</div>
		</form>
	</div>
</div>
</body>
</html>